<template>
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        @closed="close"
        @open="open"
        :append-to-body="true"
        v-loading="loading"
        width="750px">
        <el-form :model="formdata" label-width="120px" ref="addform" class="form-class" :rules="rules">
            <el-form-item label-width="60px">
                <ele-label title="基本信息"></ele-label>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="档案号：" prop="bFileID">
                        <el-input v-model.trim="formdata.bFileID" placeholder="请输入档案号" class="input-width"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名：" prop="bSName">
                        <el-input v-model.trim="formdata.bSName" placeholder="请输入姓名" class="input-width"></el-input>
                    </el-form-item>
                    <el-form-item label="性别：" prop="bSex">
                        <el-radio-group v-model="formdata.bSex">
                            <el-radio label="2">男</el-radio>
                            <el-radio label="1">女</el-radio>
                            <el-radio label="0">保密</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="出生日期：" prop="bBirthDate">
                        <el-date-picker
                            v-model="formdata.bBirthDate"
                            value-format="yyyy-MM-dd"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="头像：" prop="bPhoto">
                        <el-upload
                                class="avatar-uploader"
                                :action="baseurl"
                                :http-request="uploadFilesHandler"
                                :show-file-list="false"
                                :before-upload="beforeAvatarUpload">
                                    <img v-if="formdata.bPhoto" :src="formdata.bPhoto" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="籍贯：" prop="bBirthplace">
                <el-cascader v-model="formdata.bBirthplace" :options="cityList" clearable placeholder="请选择"></el-cascader>
            </el-form-item>
            <el-form-item label="民族：" prop="bNationality">
                <el-select v-model="formdata.bNationality" placeholder="请选择">
                    <el-option
                        v-for="item in nation"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="身份证号：" prop="bCard">
                <el-input v-model.trim="formdata.bCard" placeholder="请输入身份证号" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="残疾列表：" prop="bDisability_Type">
                <el-select v-model="formdata.bDisability_Type" placeholder="请选择">
                    <el-option :label="item.Code_Name" :value="item.Code_No" :key="item.Code_No" v-for="item in DISABILITY"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="户口所在地：" prop="bAccount">
                <el-cascader v-model="formdata.bAccount" :options="cityList" clearable placeholder="请选择"></el-cascader>
            </el-form-item>
            <el-form-item label="家庭地址：" prop="bAddress">
                <el-cascader v-model="formdata.bAddress" :options="cityList" clearable placeholder="请选择"></el-cascader>
            </el-form-item>
            <el-form-item label="" prop="bAddress1">
                <el-input v-model.trim="formdata.bAddress1" placeholder="请输入详细地址" class="input-dress-width"></el-input>
            </el-form-item>
            <el-form-item label-width="60px">
                <ele-label title="家庭情况"></ele-label>
            </el-form-item>
            <el-form-item>
                <el-row :gutter="5" class="family-class t-c">
                    <el-col :span="4">
                        姓名
                    </el-col>
                    <el-col :span="6">
                        电话
                    </el-col>
                    <el-col :span="8">
                        工作单位
                    </el-col>
                    <el-col :span="6">
                        职务
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="父：">
                <el-row :gutter="5" class="family-class">
                    <el-col :span="4">
                        <el-form-item label="" prop="bName1" label-width="0px">
                            <el-input v-model.trim="formdata.bName1" placeholder="姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="" prop="bMobile1" label-width="0px">
                            <el-input v-model.trim="formdata.bMobile1" placeholder="电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="" prop="bUnit1" label-width="0px">
                            <el-input v-model.trim="formdata.bUnit1" placeholder="工作单位"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="" prop="bPosition1" label-width="0px">
                            <el-input v-model.trim="formdata.bPosition1" placeholder="职务"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="母：">
                <el-row :gutter="5" class="family-class">
                    <el-col :span="4">
                        <el-form-item label="" prop="bName2" label-width="0px">
                            <el-input v-model.trim="formdata.bName2" placeholder="姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="" prop="bMobile2" label-width="0px">
                            <el-input v-model.trim="formdata.bMobile2" placeholder="电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="" prop="bUnit2" label-width="0px">
                            <el-input v-model.trim="formdata.bUnit2" placeholder="工作单位"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="" prop="bPosition2" label-width="0px">
                            <el-input v-model.trim="formdata.bPosition2" placeholder="职务"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="其他：">

                <el-row :gutter="5" class="family-class">
                    <el-col :span="4">
                        <el-form-item label="" prop="bName3" label-width="0px">
                            <el-input v-model.trim="formdata.bName3" placeholder="姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="" prop="bMobile3" label-width="0px">
                            <el-input v-model.trim="formdata.bMobile3" placeholder="电话"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="" prop="bUnit3" label-width="0px">
                            <el-input v-model.trim="formdata.bUnit3" placeholder="工作单位"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="" prop="bPosition3" label-width="0px">
                            <el-input v-model.trim="formdata.bPosition3" placeholder="职务"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label-width="60px">
                <ele-label title="在校情况"></ele-label>
            </el-form-item>
            <el-form-item label="入学时间：" prop="bAdmissionTime">
                <el-date-picker
                    v-model="formdata.bAdmissionTime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="班级：" prop="bClass">
                <el-input v-model.trim="formdata.bClass" placeholder="请输入班级" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="班主任：" prop="bHeadTeacher">
                <el-input v-model.trim="formdata.bHeadTeacher" placeholder="请输入班主任" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="康复老师：" prop="bTeacher">
                <el-input v-model.trim="formdata.bTeacher" placeholder="请输入康复老师" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="在校状态：" prop="bSchoolStatus">
                <el-radio-group v-model="formdata.bSchoolStatus">
                    <el-radio label="1">在校</el-radio>
                    <el-radio label="2">离校</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import eleLabel from './label.vue'
import {addstudylist,editstudylist,baseurl,upLoadFiles} from '@/api/index.js'
import {nation_data} from '@/common/js/nation.js'
import {validateContent,card} from '@/common/js/validate.js'
export default {
    name:'addStudy',
    components:{
        eleLabel
    },
    data() {
        return {
            dialogVisible:false,
            studylist:[],
            teacherlist:[],
            cityList:[],
            nation:nation_data,
            baseurl:baseurl + '/UploadPhoto',
            loading:false,
            formdata:{
                bFileID:'',
                bPhoto:'',	
                bSName:'',	
                bSex:'',	
                bBirthDate:'',	
                bBirthplace:[],	
                bNationality:'',	
                bCard:'',	
                bDisability_Type:'',	
                bAccount:[],	
                bAddress:[],
                bAddress1:'',
                bMem:'',
                bName1:'',
                bMobile1:'',
                bUnit1:'',
                bPosition1:'',
                bName2:'',
                bMobile2:'',
                bUnit2:'',
                bPosition2:'',
                bName3:'',
                bMobile3:'',
                bUnit3:'',
                bPosition3:'',
                bAdmissionTime:'',
                bClass:'',
                bHeadTeacher:'',
                bTeacher:'',
                bSchoolStatus:'1',
            },
            rules:{
                bSName:[
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                bMobile1: [
                    { validator: validateContent, trigger: 'blur' }
                ],
                bMobile2: [
                    { validator: validateContent, trigger: 'blur' }
                ],
                bMobile3: [
                    { validator: validateContent, trigger: 'blur' }
                ],
                bCard:[...card]
            }
        }
    },
    props:{
        DISABILITY:{
            type:Array,
            default:function() {
                return {}
            }
        },
        info:{
            type:null,
            default:''
        },
        title:{
            type:String,
            default:'添加学生档案'
        }
    },
    created() {
        this.$util.city_lop(this.cityList);
    },
    methods:{
        open() {
            if(this.info) {
                this.$nextTick(() => {
                    for (const key in this.formdata) {
                        if (this.formdata.hasOwnProperty(key)) {
                            let _key = key.substr(1);
                            if( _key in this.info) {
                                this.formdata[key] = this.info[_key];
                            }
                        }
                    }
                    this.formdata.bBirthplace = this.info.Birthplace ? this.info.Birthplace.split('-') : [];
                    this.formdata.bAccount =  this.info.Account ? this.info.Account.split('-') : [];
                    this.formdata.bAddress = this.info.Address ? this.info.Address.split('-') : [];
                })
            }
        },
        save(){
            this.$refs.addform.validate((valid) => {
                if (valid) {
                    let params = {
                        ...this.formdata,
                        bSchoolStatus : this.formdata.bSchoolStatus ? +this.formdata.bSchoolStatus : '',
                        bBirthplace:this.formdata.bBirthplace.join('-'),	
                        bAccount:this.formdata.bAccount.join('-'),	
                        bAddress:this.formdata.bAddress.join('-'),
                    }
                    if(this.info) {
                        editstudylist({...params,bSID:this.info.SID}).then((res) => {
                            if(res) {
                                if(res.code == 200) {
                                    this.$util.tipsMsg('success','修改成功！');
                                    this.dialogVisible = false;
                                    this.$emit('addsuccess',true);
                                } else {
                                    this.$util.tipsMsg('error',res.message);
                                }
                            }
                        }).catch((err) => {

                        })
                    } else {
                        addstudylist(params).then((res) => {
                            if(res) {
                                if(res.code == 200) {
                                    this.$util.tipsMsg('success','添加成功！');
                                    this.dialogVisible = false;
                                    this.$emit('addsuccess',true);
                                } else {
                                    this.$util.tipsMsg('error',res.message);
                                }
                            }
                        }).catch((err) => {

                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        uploadFilesHandler(options){;
            let file = options.file
            let filename = options.file.name;
            let type = options.file.type;
            if (file) {
                var ready = new FileReader();
                ready.readAsDataURL(file);
                ready.onload = (fileReader) => {
                    let base64Str = fileReader.currentTarget.result;
                    this.loading = true
                    upLoadFiles({filebytes:base64Str,bExt:type}).then((res) => {;
                        if(res.code == 200) {
                            this.formdata.bPhoto = res.FileName;
                        } else {
                            this.$message.error(res.message);
                        }
                    }).finally (() => {
                        this.loading = false;
                    })
                
                }
            }
        },
        
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 、PNG格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        close(){
            this.$refs.addform.resetFields();
        }
    }
}
</script>
<style lang="less">
.form-class{
    height:500px;
    overflow-y: auto;
    .el-icon-collection-tag{
        color:#66b1ff;
    }
    .header{
        color:#000;
        display: inline-block;
        padding-left:5px;
        font-size: 16px;
    }
    .family-class{
        margin-left:0px !important;
        margin-right: 0px !important;
    }
    .input-width{
        width: 220px;
    }
    .input-dress-width{
        width: 420px;
    }
}
</style>
